import { Link } from '@/.umi/exports';
import './index.less'
import { DatePicker, Select, Input, DatePickerProps } from 'antd';
import dayjs from 'dayjs'
import { useEffect } from 'react';
const { RangePicker } = DatePicker;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const Public = (props: { header: string }) => {
    return (
        <div className='headerMin'>
            <p>{props.header}
                <div></div>
            </p>
            <hr />
        </div>
    )
}
const From = (props:{type:string,Bookkeep: any,Bookkeep1:any,handleChange1:any,search:any,handleChange2:any,handleChange3:any,id:number,exprots:any}) => {
    return (
        <div className="from">
             <span className='name'>{props.type}</span><Select
                defaultValue="现金"
                style={{ width: 140 }}
                onChange={props.handleChange1}
                options={props.Bookkeep}
            />
            <span className='name'>日期:</span><RangePicker  onChange={props.handleChange2}/>
            <span className='name'>收支类别:</span><Select
                defaultValue="其他收入"
                style={{ width: 140 }}
                onChange={handleChange}
                options={props.Bookkeep1}
            />
            <span className='name'>结算方式:</span><Select
                defaultValue="现金"
                style={{ width: 140 }}
                onChange={props.handleChange3}
                options={[
                    { value: '现金', label: '现金' },
                    { value: '美金', label: '美金' },
                    { value: '支付宝', label: '支付宝' },
                ]}
            />
            <div className="input">
                <span>金额：</span><input className="input1"></input>至<input className="input2"></input>
            </div>
            <Input placeholder="摘要/备注/票据号/往来单位" className="input3" />
            <button type="button" onClick={props.search}>搜索</button>
            <button type="button" onClick={props.exprots}>导出</button>
            <button type="button">打印</button>
            <button type="button" style={{width:100}}>生成凭证</button>
            <button type="button" style={{width:100}}><Link to={`template/?id0=${props.id}`} style={{color:'#fff'}}>凭证模板</Link></button>
        </div>
    )
}
const Ltable = (props: { [props: string]: any }) => {
    const { theads,tbodys } = props
    // console.log(theads[1].render(tbodys[0].date),1);
    
    // console.log(props.theads[0].key);

    // document.addEventListener('keydown', (e:any) => {
    //     if (e.keyCode === 13) {
    //         console.log(e.target.value);
    //         // if(e.target.value)
    //         // .dataset.id
    //     }

    // })
    return (
        <div>
            <table className='table'>
                <thead>
                    <tr>
                        {
                            theads.map((v: { title: string }, i: number) => <th key={i}>{v.title}</th>)
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        tbodys.map((v: any, i: number) => {
                            const thead = props.theads.map((item: any) => item.key
                            );         
                            if (thead) {
                                return (
                                    <tr key={i}>
                                        {
                                            thead.map((c:any,i:number)=><td key={i}>{v[c]}</td>)
                                        }
                                    </tr>
                                );
                            }
                            return null;
                        })
                    }
                </tbody>
                <tfoot></tfoot>
            </table>
        </div>
    )
}
export { Public, From } 